<template>
  <!-- 会员列表 -->
  <div>
    <!-- 顶部搜索栏 -->
    <div class="topSearch">
      <el-form class="searchView">
        <el-input
          v-model="searchModel.name"
          placeholder="会员名称"
          style="width: 183px; margin-right: 10px"
        ></el-input>

        <el-input
          v-model="searchModel.tel"
          placeholder="手机号"
          style="width: 183px; margin-right: 10px"
        ></el-input>

        <el-select v-model="searchModel.status" placeholder="会员状态">
          <el-option label="已开通" value="baihuo"></el-option>
          <el-option label="已注销" value="meizhuabg"></el-option>
        </el-select>

        <el-button size="small" class="searchBtn" @click="searchClick"
          >查询</el-button
        >
        <el-button size="small" class="resetBtn" @click="resetClick"
          >重置</el-button
        >
      </el-form>
    </div>

    <!-- 表格内容 -->
    <div style="margin-top: 20px">
      <el-table
        :data="tableData"
        stripe
        border
        max-height="350px"
        style="width: 100%"
      >
        <el-table-column prop="id" label="会员id"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="tel" label="手机号"></el-table-column>
        <el-table-column prop="lev" label="会员等级"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column prop="registerTime" label="注册时间"></el-table-column>
        <el-table-column
          prop="lastLoginTime"
          label="最后登录时间"
        ></el-table-column>
        <el-table-column prop="loginCount" label="登录次数"></el-table-column>
        <el-table-column label="操作" width="200">
          <template v-slot="scope">
            <el-button
              class="normalButton"
              @click="($event) => detailClick(scope.row)"
              type="text"
              size="small"
              >详情
            </el-button>

            <el-button
              class="normalButton"
              @click="($event) => resetloginpwdClick(scope.row)"
              type="text"
              size="small"
              >重置登录密码
            </el-button>

            <el-button
              class="normalButton"
              @click="($event) => changeStatusClick(scope.row)"
              type="text"
              size="small"
              >更改状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      width="50%"
      title="会员详情"
      :visible.sync="memberDetailDialog"
      left
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>
      <el-form
        class="dialogDetailForm"
        :model="memberDetailModel"
        label-width="150px"
      >
        <el-form-item label="ID:">
          <el-input
            v-model="memberDetailModel.id"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="会员名称:">
          <el-input
            v-model="memberDetailModel.name"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号:">
          <el-input
            v-model="memberDetailModel.tel"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="会员级别:">
          <el-input
            v-model="memberDetailModel.lev"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态:">
          <el-input
            v-model="memberDetailModel.status"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="最后登录时间:">
          <el-input
            v-model="memberDetailModel.lastLoginTime"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="注册时间:">
          <el-input
            v-model="memberDetailModel.registerTime"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="购买次数:">
          <el-input
            v-model="memberDetailModel.buyCount"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item label="登录次数:">
          <el-input
            v-model="memberDetailModel.loginCount"
            :disabled="true"
            style="width: 70%"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-col align="right">
            <el-button
              type="text"
              style="margin-right: 30%; color: rgb(41, 59, 105)"
              >查看购买记录</el-button
            >
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="50%"
      title="重置登录密码"
      :visible.sync="resetpwdDialog"
      left
    >
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>

      <el-row>
        <el-col>
          <span style="margin-left: 30px">重置密码:</span>
          <el-input
            style="width: 50%; margin-left: 20px"
            placeholder="手机后四位+随机两位数"
          ></el-input>
          <el-button
            type="text"
            style="color: rgb(41, 59, 105); margin-left: 5px"
            >复制密码</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>

    <el-dialog width="50%" title="会员状态" :visible.sync="statusDialog" left>
      <div
        style="
          width: 100%;
          height: 1px;
          background: rgb(238, 238, 238);
          margin-top: -20px;
          margin-bottom: 20px;
        "
      ></div>

      <el-row style="height: 200px">
        <el-col style="margin-left: 50px; margin-top: 80px">
          <span style="margin-left: 50px">会员状态:</span>

          <el-select
            style="margin-left: 20px"
            v-model="memberStatus"
            placeholder="会员状态"
          >
            <el-option label="已开通" value="baihuo"></el-option>
            <el-option label="已注销" value="meizhuabg"></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "memberList",
  data() {
    return {
      searchModel: {
        name: "", //会员名称
        tel: "", //手机号
        status: "", //会员状态
      },
      tableData: [
        {
          id: "666", //会员id
          name: "葛二蛋", //会员名称
          tel: "13344445555", //手机号
          lev: "6", //会员等级
          status: "1", //状态
          registerTime: "2023年11月24日15:04:53", //注册时间
          lastLoginTime: "2023年11月24日15:05:04", //最后登录时间
          loginCount: "3", //登录次数
        },
      ],
      memberDetailDialog: false,
      resetpwdDialog: false,
      statusDialog: false,
      memberDetailModel: {
        id: "1000",
        name: "唐宋元明清",
        tel: "19568656323",
        lev: "1级别",
        status: "1", //状态
        registerTime: "2023年11月24日15:04:53", //注册时间
        lastLoginTime: "2023年11月24日15:05:04", //最后登录时间
        buyCount: "3", //购买次数
        loginCount: "3", //登录次数
      },
      memberStatus: "正常", //dialog会员状态
    };
  },
  computed: {},

  methods: {
    //查询
    searchClick() {
      console.log("查询");
    },

    resetClick() {
      console.log("重置");
    },
    //详情
    detailClick(row) {
      console.log(row);
      this.memberDetailDialog = true;
    },
    //重置密码
    resetloginpwdClick(row) {
      console.log(row);
      this.resetpwdDialog = true;
    },
    //更改状态
    changeStatusClick(row) {
      console.log(row);
      this.statusDialog = true;
    },
  },
};
</script>

<style scoped>
.topSearch {
  border: 1px solid rgb(228, 228, 288);
  background-color: white;
  width: 98%;
  height: 45px;
  padding: 20px;
}
.searchView
/* display: flex 默认水平排列 */ {
  display: flex;
}

.searchBtn {
  margin-left: 50px;
  width: 100px;
  height: 30px;
  color: white;
  background-color: rgb(41, 59, 105);
}
.resetBtn {
  margin-left: 10px;
  width: 100px;
  height: 30px;
  color: white;
  background: rgb(68, 98, 170);
}
</style>
